<!--
*  功能描述：项目统计
 -->
 <template>
  <div>
      
    <el-tag style="width: 100%; text-align: left; font-size: 20px"
      >项目统计</el-tag
    >
    
    <el-form>
        <el-form-item label="生产部门" prop="Dname">
        
      <el-select v-model="Dname" placeholder="请选择" clearable> 
        <el-option
          v-for="item in Depart"
          :key="item.DepId"
          :value="item.DepName"
          :label="item.DepName"
          ></el-option
        ></el-select
      >
      &nbsp;&nbsp;<el-button type="primary" @click="onsubmit">查询</el-button>
      <el-button type="primary" @click="GetContractExcel" style="background-color:red">导出excel</el-button>
      </el-form-item>
      </el-form>
    <div >
      <el-table :data="tabledata">
        <el-table-column prop="ProjectTypeName" label="部门名称" >
        </el-table-column>
        <el-table-column prop="Quarter1" label="第一季度" >
        </el-table-column>
        <el-table-column prop="Quarter2" label="第二季度" >
        </el-table-column>
        <el-table-column prop="Quarter3" label="第三季度" >
        </el-table-column>
        <el-table-column prop="Quarter4" label="第四季度" >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabledata: [],
      Dname: "",
      Depart: [],
    };
  },
  methods: {
    onsubmit(){
      this.ShowCountPro();
    },
    ShowCountPro() {
      this.$http({
        url: "Operation/ShowCountProject?DName="+this.Dname,
        method: "Get",
      }).then((res) => {
        this.tabledata = res.data;
        console.log(res.data);
      });
    },
    DeptXl() {
      this.$http({
        url: "Operation/GetDept",
        method: "Get",
      }).then((res) => {
        this.Depart = res.data;
        console.log(this.data);
      });
    },
    GetContractExcel() {
        window.open("Operation/ShowCountExecel")
    },
  },
  created() {
    this.ShowCountPro();
    this.DeptXl();
  },
};
</script>